<template>
  <!-- 提现审核 -->
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="130px">
        <el-row>
          <el-col :span="8">
            <!-- @blur="inputBlur" -->
            <el-form-item label="机构名称">
              <el-select
                v-model="form.hospital_id"
                placeholder="请选择"
                filterable
                remote
                :remote-method="remoteMethod"
                clearable
                @change="handleChange"
              >
                <el-option
                  v-for="item in hospitalNameList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="提现时间">
              <el-date-picker
                v-model="cashDates"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核时间">
              <el-date-picker
                v-model="checkDates"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核状态">
              <el-select v-model="form.check_status" placeholder="请选择" clearable>
                <el-option
                  v-for="item in checkList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="户名">
              <el-input v-model="form.bank_user_name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button style="margin-left:60px" type="primary" @click="handleSearch">查询</el-button>
              <el-button type="primary" @click="handleExport">导出</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <el-table :data="tableData" class="tableData" style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="50"
          align="center"
          :index="table_index"
        />
        <el-table-column prop="hospital_name" label="机构名称" align="center" />
        <el-table-column prop="bank_name" label="提现银行卡" align="center" />
        <el-table-column prop="bank_number" label="提现银行" align="center" width="180px" />
        <el-table-column prop="bank_user_name" label="户名" align="center" />
        <el-table-column prop="money" label="提现金额" align="center" />
        <el-table-column prop="before_change" label="原账户余额" align="center" />
        <el-table-column prop="after_change" label="提现后余额" align="center" />
        <el-table-column prop="created_at" label="提现时间" align="center" width="160px" />
        <el-table-column prop="remark" label="提现说明" align="center" />
        <el-table-column prop="check_status_cn" label="审核状态" align="center" />
        <el-table-column prop="check_remark" label="审核说明" align="center" />
        <el-table-column prop="check_username" label="审核人" align="center" width="110px" />
        <el-table-column prop="check_time" label="审核时间" align="center" width="160px" />
        <el-table-column fixed="right" label="操作" width="130px" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              v-if="scope.row.check_status == 0"
              @click="toCheck(scope.row.id)"
            >审核</el-button>
            <el-button
              type="text"
              size="small"
              @click="toRoutes('tixianDetail',scope.row.id,'detail')"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="form.page"
            :page-sizes="page_sizes"
            :page-size="form.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 审核弹窗 -->
    <el-dialog title="审核" :visible.sync="centerDialogVisible" width="468px" @close="closeDialog">
      <el-form ref="checkForm" :model="checkForm" :rules="checkRules" label-width="100px">
        <el-form-item label="审核" prop="check_status">
          <el-radio-group v-model="checkForm.check_status">
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="checkForm.check_status == 2" label="驳回原因" prop="check_msg">
          <el-input
            v-model="checkForm.remark"
            placeholder="最多100个字符，超过字数限制不继续可输入"
            maxlength="100"
            clearable
            type="textarea"
            rows="4"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveFn('checkForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//
import { cashoutAll, cashCheck, cashExport } from "@/api/cashOut";
import { getOrgList } from "@/api/accountMange";
import commonFn from "@/utils/common";
export default {
  name: "tixianCheck",
  data() {
    return {
      form: {
        bank_user_name: "",
        hospital_id: "",
        check_status: "",
        cashout_start_date: "",
        cashout_end_date: "",
        check_start_date: "",
        check_end_date: "",
        page: 1,
        pageSize: 10,
      },
      hospitalNameList: [],
      hospitalArr: [],
      cashDates: null,
      checkDates: null,
      checkList: [],
      tableData: [],
      page_totals: 0,
      page_sizes: [10, 30, 50, 100],
      tableLoading: false,
      checkForm: {
        id: "",
        check_status: "",
        remark: "",
        check_uid: "",
      },
      centerDialogVisible: false,
      checkRules: {
        check_status: [
          {
            required: true,
            message: "请勾选",
            trigger: "change",
          },
        ],
        remark: [
          {
            required: true,
            message: "请输入驳回原因",
            trigger: "blur",
          },
        ],
      },
    };
  },

  components: {},

  mounted() {
    this.getList(this.form);
    this.getHosName();
  },
  watch: {
    // 提现时间
    cashDates(val) {
      this.form.cashout_start_date = val ? val[0] : "";
      this.form.cashout_end_date = val ? val[1] : "";
    },
    // 审核时间
    checkDates(val) {
      this.form.check_start_date = val ? val[0] : "";
      this.form.check_end_date = val ? val[1] : "";
    },
  },
  methods: {
    // 序号
    table_index(index) {
      return (this.form.page - 1) * this.form.pageSize + index + 1;
    },
    // 路由跳转
    toRoutes(name, id, type) {
      // console.log(e, id, type);
      const route = { path: name, query: { id: id, type: type } };
      this.$router.push(route);
    },
    async getList(opt) {
      let res = await cashoutAll(opt);
      // console.log("res", res.data);
      if (res.data.status == 0) {
        let resData = res.data.data;
        this.tableData = resData.list;
        this.checkList = resData.checkStatusArray;
        this.page_totals = resData.total;
      } else {
        this.errorStatus(res.data.message);
      }
    },
    // 获取机构名称
    async getHosName() {
      let res = await getOrgList();
      if (res.data.code == 200) {
        let resData = res.data.data;
        this.hospitalNameList = resData;
        this.hospitalArr = resData;
      } else {
        this.errorStatus(res.data.msg);
      }
    },
    // 远程搜索
    remoteMethod(query) {
      const data = { keyword: query };
      if (query != "") {
        getOrgList(data).then((res) => {
          if (res.data.code == 200) {
            let resData = res.data.data;
            if (resData.length > 0) {
              // console.log(8888);
              this.hospitalNameList = resData;
            }
          } else {
            this.errorStatus(res.data.msg);
          }
        });
      } else {
        console.log(889998);
        this.hospitalNameList = this.hospitalArr;
      }
    },
    // 机构名称失焦
    inputBlur() {
      console.log(888);
      this.hospitalNameList = this.hospitalArr;
    },
    // 机构名称下拉切换
    handleChange(e) {
      // console.log("e", e);
      this.form.hospital_id = e;
      this.getHosName();
    },
    toCheck(id) {
      this.centerDialogVisible = true;
      this.checkForm.id = id;
    },
    // 审核
    saveFn(checkForm) {
      // sessionStorage.setItem userId
      let data = {
        id: this.checkForm.id,
        check_status: this.checkForm.check_status,
        remark: this.checkForm.check_status == 2 ? this.checkForm.remark : "",
        check_uid: sessionStorage.getItem("userId"),
      };
      this.$refs[checkForm].validate((valid) => {
        if (valid) {
          let res = cashCheck(data).then((res) => {
            console.log("res", res.data);
            if (res.data.status == 0) {
              this.centerDialogVisible = false;
              this.getList(this.form);
            } else {
              this.errorStatus(res.data.message);
            }
          });
        } else {
          this.warnStatus("有必选项没填,否则不能提交哦~~", "warning");
        }
      });
    },
    // 弹窗关闭
    closeDialog() {},
    // 查询
    handleSearch() {
      this.form.page = 1;
      this.getList(this.form);
    },
    // 导出
    handleExport() {
      let datas = { ...this.form };
      delete datas.page;
      delete datas.pageSize;
      cashExport(datas)
        .then((res) => {
          console.log("ress", res);
          commonFn.downFile("机构提现审核导出", res);
        })
        .catch((err) => {
          this.errorStatus(err.message);
        });
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getList(this.form);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList(this.form);
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
    // 成功状态弹窗
    warnStatus(txt, status) {
      this.eleMsg(txt, status);
      // this.eleMsg(txt, "warning");
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status,
      });
    },
  },
};
</script>
<style  scoped>
.pagesCon {
  height: 40px;
  margin-top: 20px;
}
.pagesCon > div {
  float: right;
}
</style>